<template>
    <!-- 上面搜索栏部分 -->
    <div class="search-box">
        <div class="flex">
            <div>
                <el-icon>
                    <Search />
                </el-icon>
                <span>筛选搜索</span>
            </div>
            <div>
                <el-button>重置</el-button>
                <el-button type="primary">查询搜索</el-button>
            </div>
        </div>

        <div style="padding-top: 20px">
            <!-- 在input里面回车会造成刷新，大家今晚可以尝试解决一下 -->
            <!-- 在有多个搜索框的情况下添加全部清空功能 -->
            <el-form ref="searchFormRef">
                <el-form-item label="输入搜索:" label-width="120px">
                    <!-- @keyup.enter 回车事件 -->
                    <!-- <el-input v-model="listParams.keyword" placeholder="请输入账号、姓名" @keyup.enter="submitFn" /> -->
                    <el-input placeholder="订单编号" />
                </el-form-item>

                <el-form-item label="收货人:" label-width="120px">
                    <el-input placeholder="收货人姓名/手机号码" />
                </el-form-item>


                <el-form-item label="提交时间:" label-width="120px">
                    <div class="demo-date-picker">
                        <el-date-picker v-model="value1" type="date" placeholder="请选择时间"
                            :default-value="new Date(2010, 9, 1)" />
                    </div>
                </el-form-item>

                <el-form-item label="订单状态:" label-width="120px">
                    <el-select v-model="value" class="m-2" placeholder="全部">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="订单分类:" label-width="120px">
                    <el-select v-model="value" class="m-2" placeholder="全部">
                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="订单来源:" label-width="120px">
                    <el-select v-model="value" class="m-2" placeholder="全部">
                        <el-option v-for="item in option3" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
    </div>

    <!-- 数据列表 -->
    <div class="add-box">
        <div class="left">
            <el-icon>
                <Tickets />
            </el-icon>
            <span>数据列表</span>
        </div>
    </div>

    <!-- 订单数据表格 -->
    <el-table :data="list" border style="width: 100%">
        <el-table-column prop="date" type="selection" width="50" />
        <el-table-column prop="name" label="编号" width="100" />
        <el-table-column prop="address" label="订单编号" />
        <el-table-column prop="date" label="提交时间" width="180" />
        <el-table-column prop="name" label="用户账号" width="400" />
        <el-table-column prop="address" label="订单金额" />
        <el-table-column prop="date" label="支付方式" width="180" />
        <el-table-column prop="name" label="订单来源" width="180" />
        <el-table-column prop="address" label="订单状态" />
        <el-table-column prop="address" label="操作" />
    </el-table>

    <!-- 批量操作和分页 -->
    <div class="bottom">
        <div class="left">
            <el-select v-model="value" class="m-2" placeholder="批量操作">
                <el-option v-for="item in option4" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-button type="primary">确定</el-button>
        </div>

        <!-- 底部分页 -->
        <ElConfigProvider :locale="zhCn">
            <el-pagination v-model:currentPage="state.pageNum" v-model:page-size="state.pageSize" background
                layout="total, sizes, prev, pager, next ,jumper" :total="total" @size-change="pageSizeChagne"
                @current-change="currentChagne" :page-sizes="[10, 20, 50, 100]" />
        </ElConfigProvider>
    </div>

</template>

<script setup lang='ts'>
import { Search, Tickets } from "@element-plus/icons-vue";
import { ref, reactive, toRefs } from 'vue'
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { user } from "@/api"



const value1 = ref('')
const value = ref('')

const options1 = [
    {
        value: '待付款',
        label: '待付款',
    },
    {
        value: '待发货',
        label: '待发货',
    },
    {
        value: '已发货',
        label: '已发货',
    },
    {
        value: '已完成',
        label: '已完成',
    },
    {
        value: '已关闭',
        label: '已关闭',
    },
]

const options2 = [
    {
        value: '正常订单',
        label: '正常订单',
    },
    {
        value: "秒杀订单",
        label: "秒杀订单"
    }
]

const option3 = [
    {
        value: "PC订单",
        label: "PC订单"
    },
    {
        value: "APP订单",
        label: "APP订单"
    }
]
const option4 = [
    {
        value: "批量发货",
        label: "批量发货"
    },
    {
        value: "关闭订单",
        label: "关闭订单"
    },
    {
        value: "删除订单",
        label: "删除订单"
    }
]


// 订单列表-传递的参数
interface IList {
    list: []
    createTime?: string
    orderSn?: string
    orderType?: number | null
    pageNum?: number
    pageSize?: number
    receiverKeyword?: string
    sourceType?: number | null
    status?: number | null
    total: number
}


// 一般如果遇上有部分数据是复杂类型，希望它们是响应式的，一般先准备一个总的state
const state = reactive<IList>({
    list: [],
    createTime: "",
    orderSn: "",
    orderType: null,
    pageNum: 1,
    pageSize: 10,
    receiverKeyword: "",
    sourceType: null,
    status: null,
    total: 0
})






const pageSizeChagne = () => {

}

const currentChagne = () => {

}

let { list, total } = toRefs(state)
</script>

<style lang="less" scoped>
.search-box {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0px 0px 6px 0px gray;
    margin-bottom: 20px;

    .el-form {
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
    }

    .flex {
        display: flex;
        justify-content: space-between;
    }

    .el-icon {
        margin-right: 10px;
    }

    .el-input {
        width: 215px;
    }

}

.add-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 0 4px 2px #ccc;

    .left {
        display: flex;
        align-items: center;
        padding: 0 10px;

        .el-icon {
            margin-right: 10px;
        }

    }
}

.el-table .el-table__cell {
    padding: 20px 0;
}

.bottom {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;

    .left {
        .el-button {
            margin-left: 10px;
        }
    }
}
</style>